<template>
  <div class="pagination">
    <el-pagination
      v-model:currentPage="obj.page"
      v-model:pageSize="obj.size"
      :page-sizes="pageSize"
      :layout="layout"
      :total="obj.count"
      background
      :small="small"
      :hide-on-single-page="false"
      @size-change="sizeChange"
      @current-change="pageChange"
    />
   
  </div>
</template>

<script>
export default {
  name: "laPagination",
  components: {

  },
  props: {
    modelValue: Object,
    pageSizes: {
        type:String,
        default(){
            return [15, 20, 30, 40]
        }
    },
    layout: {
        type:String,
        default(){
            return 'total, sizes, prev, pager, next, jumper'
        }
    },
    small:{
      type:Boolean,
      default(){
        return false
      }
    }
    
  },
  computed: {
    obj: {
      get() {
        return this.modelValue;
      },
      set(value) {
        this.$emit("update:modelValue", value);
      },
    },
  },
  methods: {
    sizeChange(size) {
        // this.obj.current_page = 1;
        // this.obj.page_size = size;
        
      this.$emit("change");
    },
    pageChange(page) {

    //   this.obj.current_page = page;
    //   this.obj.per_page = 10;
    //   console.log(1111,this.obj)
      this.$emit("change");
    },
  },
};
</script>
